<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册新账号</title>
  <script src="js/jq.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;

    }

    .box {
      height: 100%;
      display: flex;

    }

    .reg-left {
      box-sizing: border-box;
      padding-top: 20px;
      width: 40%;
      height: 100%;
      background-image: url(img/01-3.webp);
      background-size: cover;
      background-position: 0 -80px;
      background-repeat: no-repeat;
    }

    .reg-left p {

      margin-left: 20px;
      font-size: 40px;


    }

    .reg-left p span {
      margin-right: 20px;
      display: inline-block;
      width: 36px;
      height: 43px;
      background-image: url(img/qqlogo.png);
    }

    .reg-right {
      width: 60%;
      /* height: 100%; */
      box-sizing: border-box;
      padding-top: 10px;
    }

    .reg-right .right-text {
      text-align: right;
    }

    .right-text a {
      margin-right: 30px;
      color: #999;
      text-decoration: none;
    }

    .right-text a:hover {
      color: rgb(17, 17, 17);
      text-decoration: underline;
    }

    .reg {
      width: 400px;
      margin: 100px auto 0;
    }

    .reg input {
      margin-bottom: 20px;
      font-size: 20px;
      width: 300px;
      height: 40px;
      outline: none;
    }

    .reg p {
      margin-top: 10px;
      margin-bottom: 40px;
    }

    .reg label input {

      width: 10px;
      height: 10px;

    }

    .reg label {
      font-size: 12px;
    }

    .reg-text-fool {
      text-align: center;
      margin-top: 80px;
      font-size: 12px;
    }

    .btn-reg {
      background-color: #307ceb;
      color: white;
      border: none;
    }

    .reg {
      position: relative;
    }

    .s1 {
      position: absolute;
      left: 0;
      top: 158px;
    }

    .s2 {
      position: absolute;
      left: 0;
      top: 220px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="reg-left">
      <p><span></span>QQ</p>
    </div>
    <div class="reg-right">
      <p class="right-text">
        <a href="">靓号</a>
        <a href="">简体中文</a>
        <a href="">意见反馈</a>
      </p>
      <div class="reg">
        <h1>欢迎注册</h1>
        <p>每一天，乐在沟通</p>

        <input type="text" name="" id="user" placeholder="账号"><span class="s1"></span><br>
        <input type="text" name="" id="pawd" placeholder="密码"><span class="s2"></span><br>
        <input type="button" value="立即注册" class="btn-reg"><br>
        <label for=""><input type="checkbox" id="check"> 我已阅读并同意相关服务条款和隐私政策 </label>
      </div>
      <p class="reg-text-fool">Copyright © 1998-2022Tencent All Rights Reserved</p>
    </div>
  </div>
  <script>
    let isUsername = false;
    $('#user').blur(function () {
      let reg = /^[a-zA-Z]\w{5,17}$/;
      if (reg.test($('#user').val())) {
        let url = "http://jx.xuzhixiang.top/ap/api/checkname.php"
        $.get(url, { username: $('#user').val() }, function (res) {
          console.log(res);
          if (res.code == 1) {
            $('#user').next().html(res.msg);
            $('#user').next().css({ fontSize: '12px', color: 'green' });
            isUsername = true;
          } else {
            $('#user').next().html(res.msg);
            $('#user').next().css({ fontSize: '12px', color: 'red' });
            isUsername = false;
          }
        }

        );
      } else {
        $('#user').next().html('账号必须以字母开头6-18个非空字符');
        $('#user').next().css({ fontSize: '12px', color: 'red' });
        isUsername = false;
      }
    })

    let isPassword = false;
    $('#pawd').blur(function () {
      let reg = /^\S{3,10}$/;
      if (reg.test($('#pawd').val())) {
        // $('#pawd').next().html('密码长度为3-10个非空字符');
        $('#pawd').next().html('^_^');
        $('#pawd').next().css({ fontSize: '12px', color: 'green' });
        isPassword = true;

      } else {
        $('#pawd').next().html('密码长度为3-10个非空字符');
        $('#pawd').next().css({ fontSize: '12px', color: 'red' });
        isPassword = false;

      }

    })


    $('.btn-reg').click(function () {
      // console.log(isUsername);
      let check = document.querySelector('#check');
      console.log(check.checked);
      // console.log(isPassword);
      if (isPassword && isUsername && check.checked) {
        console.log(4);
        let url = 'http://jx.xuzhixiang.top/ap/api/reg.php';
        $.get(url, { username: $('#user').val(), password: $('#pawd').val() }).then(function (res) {
          console.log(res);
          if (res.code == 1) {
            localStorage.setItem("user", $('#user').val());
            localStorage.setItem("pawd", $('#pawd').val());
            
            location.href = "index.html";
          }
        })
      } else {
        // $('#pawd').next().html('请检查账号密码');
        // $('#pawd').next().css({fontSize:"12px"})
      }


    })

  </script>
</body>

</html>